<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import router from "@/router/index";
import { _$, $ } from "./edit";

const formRef = ref();
const uploadRef = ref();

onMounted(() => {
  $.init([formRef, uploadRef]);
  if (router.currentRoute.value.query.id) {
    _$.requestParam.id = router.currentRoute.value.query?.id;
    $.loadEdit();
  }
});

onUnmounted(() => {
  $.clean();
});
</script>

<template>
  <el-space direction="vertical" fill wrap class="w-fill" :size="20">
    <el-page-header @back="router.back()" size="small">
      <template #content>
        <span class="text-large font-600 mr-3">资讯编辑</span>
      </template>
    </el-page-header>
    <el-card class="w-fill" shadow="never">
      <el-space wrap class="w-fill" :size="20">
        <el-button type="info" size="small" @click="$.onReset(formRef)"
          >重置</el-button
        >
        <el-button type="primary" size="small" @click="$.onSubmit(formRef)"
          >提交</el-button
        >
      </el-space>
    </el-card>
    <el-card class="w-fill" shadow="never">
      <el-descriptions title="基本信息">
        <el-descriptions-item>
          <el-form
            ref="formRef"
            :model="_$.requestParam"
            :rules="_$.rules"
            label-width="auto"
            size="small"
            style="max-width: 600px"
          >
            <el-form-item label="低血压(mmHg)" prop="diastolicBloodPressure">
              <el-input v-model="_$.requestParam.diastolicBloodPressure" />
            </el-form-item>
            <el-form-item label="空腹血糖(mmol/L)" prop="fastingBloodSugar">
              <el-input v-model="_$.requestParam.fastingBloodSugar" />
            </el-form-item>
            <el-form-item label="心率(次每分钟)" prop="heartRate">
              <el-input v-model="_$.requestParam.heartRate" />
            </el-form-item>
            <el-form-item label="身高(m)" prop="height">
              <el-input v-model="_$.requestParam.height" />
            </el-form-item>
            <el-form-item label="脉搏(次每分钟)" prop="pulse">
              <el-input v-model="_$.requestParam.pulse" />
            </el-form-item>
            <el-form-item label="高血压(mmHg)" prop="systolicBloodPressure">
              <el-input v-model="_$.requestParam.systolicBloodPressure" />
            </el-form-item>
            <el-form-item label="腰围(cm)" prop="waistCircumference">
              <el-input v-model="_$.requestParam.waistCircumference" />
            </el-form-item>
            <el-form-item label="体重(kg)" prop="weight">
              <el-input v-model="_$.requestParam.weight" />
            </el-form-item>
            <el-form-item label="测量时间" prop="measurementDate">
              <el-date-picker
                v-model="_$.requestParam.measurementDate"
                type="datetime"
              />
            </el-form-item>
            <el-form-item label="体检文件" prop="healthFile">
              <el-upload
                ref="uploadRef"
                v-model:file-list="_$.fileList"
                class="upload-control"
                drag
                action="/ats/user/health/upload"
                :headers="_$.headers"
                :limit="1"
                :on-exceed="$.onExceed"
                :on-success="$.onUploadSuccess"
              >
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">
                  拖拽文件到此处或 <em>点击上传</em>
                </div>
                <template #tip>
                  <div class="el-upload__tip">
                    <el-text type="info">文件不能大于1G</el-text>
                  </div>
                </template>
              </el-upload>
            </el-form-item>
          </el-form>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </el-space>
</template>

<style scoped>
.upload-control {
  width: 100%;
}
</style>
